<nz-page-header (nzBack)="backToHome()" nzBackIcon nzTitle="商店" nzSubtitle=""> </nz-page-header>
<nz-spin [nzSpinning]="isSpinning" [nzTip]="nzTip">
<div class="ml-3 mr-3 mt-3 mb-3 mr-3 pl-2 pr-2 rounded bg-white">
  <div class="ml-5 mr-5 mt-3 border rounded border-white">
    <div nz-row class="mt-4 mb-3">
      <nz-tag [nzColor]="'#108ee9'"></nz-tag>选择会员订阅计划
    </div>
    <button nz-button nzBlock (click)="styleChange(1)" [ngClass]="{'primary-button': styleInfo === '普通版VIP'}">普通版VIP</button>
    <button nz-button class="mt-3" nzBlock (click)="styleChange(2)" [ngClass]="{'primary-button': styleInfo === '高级版SVIP'}">高级版SVIP</button>
    <button nz-button class="mt-3" nzBlock  (click)="styleChange(3)" [ngClass]="{'primary-button': styleInfo === '加强版SSVIP'}">加强版SSVIP</button>
  </div>
<!--  [nzType]="{'primary': styleInfo === '普通版VIP'}"-->
  <div class="ml-5 mr-5 mt-3 pb-3 border rounded border-white" *ngIf="currentCommdity.length > 0">
    <div nz-row class="mt-4 mb-3">
      <nz-tag [nzColor]="'#108ee9'"></nz-tag>选择会员时长
    </div>
    <button nz-button  nzBlock nzType="default" (click)="buyTime(0)">1个月(¥{{currentCommdity[0].price}})</button>
    <button nz-button class="mt-3" nzBlock nzType="default" (click)="buyTime(1)">3个月(¥{{currentCommdity[1].price}})</button>
    <button nz-button class="mt-3" nzBlock nzType="default" (click)="buyTime(2)">6个月(¥{{currentCommdity[2].price}})</button>
    <button nz-button class="mt-3" nzBlock nzType="default" (click)="buyTime(3)">12个月(¥{{currentCommdity[3].price}})</button>
  </div>
</div>
</nz-spin>
<!--<ul-->
<!--  nz-list-->
<!--  [nzDataSource]="commoditys"-->
<!--  nzBordered-->
<!--  [nzItemLayout]="'horizontal'"-->
<!--  nzSize="large"-->
<!--  [nzLoading]="isLoading"-->
<!--  [nzRenderItem]="largeItem"-->
<!--&gt;-->
<!--  <ng-template #largeItem let-item>-->
<!--    <li nz-list-item [nzActions]="[opAction]" [nzContent]="content"></li>-->
<!--    <ng-template #content>-->
<!--        <nz-card-meta-->
<!--          nz-col-->
<!--          nzSpan="18"-->
<!--          [nzAvatar]="shopAvatar"-->
<!--          [nzTitle]="shopTitle"-->

<!--          [nzDescription]="shopDescription"-->
<!--        ></nz-card-meta>-->
<!--      <ng-template #shopAvatar>-->
<!--        <nz-avatar nzSize="large" [nzSrc]="vip"></nz-avatar>-->
<!--      </ng-template>-->
<!--      <ng-template #shopTitle>-->
<!--        <span class="pt-4">¥{{item.price}}</span>-->
<!--      </ng-template>-->
<!--      <ng-template #shopDescription>-->
<!--        <span nz-row >{{item.name}}</span>-->
<!--        <div nz-row *ngFor="let contentItem of item.content.content_extra.split(';')">-->
<!--          <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>-->
<!--          <span>-->
<!--          {{contentItem.split('-')[1]}}-->
<!--        </span>-->
<!--        </div>-->

<!--      </ng-template>-->
<!--    </ng-template>-->
<!--    <ng-template #opAction>-->
<!--      <button class="float-right" nz-button nzType="primary" (click)="buyTime(item)">购买</button>-->
<!--    </ng-template>-->
<!--  </ng-template>-->
<!--</ul>-->
